import React from 'react'
import { Card, Alert, Button } from 'antd';
class Base04 extends React.Component {
    constructor(porps) {
        super(porps);
        this.state = {
            name: "zlt"
        }
        this.click2 = this.click2.bind(this);
    }
    //方法
    click1() {
        alert(this.state.name)
    }
    click2() {
        alert(this.state.name)
    }
    click3 = () => {
        alert(this.state.name)

    }
    click4(value, element) {
        console.log(element.target.getAttribute("aid"))
        this.setState({
            name: value
        })
    }

    click5 = (e) => {
        this.setState({
            name: e
        })
    }
    click6 = (value, element) => {
        console.log(value, element)
        this.setState({
            name: element.target.getAttribute("aid")
        })
    }


    render() {
        return (
            <Card title="state.name" bordered={false}>
                <div>

                    <Alert
                        message="state.name"
                        description={`this.state.name =${this.state.name}`}
                        type="success"
                    />
                    <br />
                    <Button onClick={this.click1.bind(this)} type="primary" >bind(this)方法</Button>
                    <br />
                    <br />
                    <Button onClick={this.click2} type="primary" >构造函数中改变</Button>
                    <br />
                    <br />
                    <Button onClick={this.click3} type="primary" >click3 = () => {}</Button>
                    <br />
                    <br />
                    <Button aid="click 传值1" onClick={this.click4.bind(this, "zcc")} type="primary" >click 传值1</Button>
                    <br />
                    <br />
                    <Button onClick={() => { this.click5("赵理通") }} type="primary" >click 传值2</Button>
                    <br />
                    <br />
                    <Button aid="aid" onClick={(event) => { this.click6("赵理通", event) }} type="primary" >获取元素上的属性</Button>

                </div>
            </Card>
        )
    }

}
export default Base04;